Proximity Principle in Visual Design視覺設計中的接近性原則

接近性原則是格式塔心理學的重要組成部分之一，指出相互靠近的設計元素被使用者視為相關或屬於同一組，而分隔較遠的元素則被認為屬於不同組。這一原則廣泛應用於使用者介面設計中，幫助使用者快速理解介面佈局並完成任務。

接近性原則的定義

接近性原則表明，當元素之間的距離較近時，使用者傾向於認為它們具有相似的功能或特性，屬於同一組。而分隔較遠的元素則被視為不相關或獨立存在。

例如：在一個包含點和三角形的網格中，如果在網格中加入較大的空白分隔，使用者更傾向於將這些形狀視為不同的組，而不是整體。

接近性原則的應用場景

1. 將相關元素放在一起

接近性是最重要的分組原則之一，常常可以超越顏色、形狀等其他視覺提示。透過將相關元素放在一起並分隔不相關的元素，設計能夠更清晰地傳達功能性分組。

示例：網站導航中的分組
在大型螢幕上，Wellington City Council 網站的搜尋功能與主導航條在同一行。但透過增加搜尋按鈕與導航條之間的空白，設計有效地表明瞭兩者的不同功能。

響應式設計中的調整:在小螢幕上，由於空間限制，搜尋功能被移至導航條的上方，以避免它被誤認為主導航的一部分。

2. 文字內容的分組

在文字排版中，接近性透過段落間的空白幫助使用者理解內容結構：

每個段落上方和下方的空白將句子分組在一起。

標題與對應內容的靠近性幫助使用者快速關聯並理解內容。

3. 表單設計中的分塊

在表單設計中，將相關欄位分組可以減輕使用者的認知負擔：

例如，將一個包含12個欄位的大表單分成3個小組，每組4個欄位，看起來更容易完成。

透過減少欄位標籤與輸入框之間的空白，可以直觀地表明它們是相關聯的。

4. 避免不相關元素的分組

錯誤地將不相關的元素放在一起可能會迷惑使用者。例如：

錯誤案例：功能按鈕分組不當
在 California EDD 網站中，新增僱主資訊的按鈕與“下一步”、“儲存草稿”和“取消”按鈕靠得太近，使用者可能無法正確理解這些按鈕的功能。

5. 分隔過遠的元素可能被忽略

過於分散的設計可能導致使用者忽略關鍵元素：

移動應用中的跳過選項:在 Kayak 移動應用的登入頁面中，“跳過”選項放置在螢幕左上角，遠離主要操作按鈕，導致使用者很容易忽略。

電視應用中的操作提示”Hulu 在 Apple TV 上的介面中，“檢視詳情”的提示放置在螢幕右下角，遠離使用者的注意區域，使得使用者誤認為沒有相關操作。

接近性原則在響應式設計中的挑戰

在響應式佈局中，螢幕大小的變化可能改變元素的接近性，從而影響使用者的理解：

案例：倫敦交通網站
在桌面版中，低排放區（Ultra Low Emission Zone 和 Low Emission Zone）的相關資訊靠得較近，便於使用者比較。而在移動版中，這些資訊被分開放置，可能導致使用者漏掉其中一項。